﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery_Jcrop.aspx.cs" Inherits="jsPlugDemo_Jquery_Jcrop"
    ClientIDMode="Static" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../js/plugin/Jcrop/js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/plugin/Jcrop/js/jquery.Jcrop.js" type="text/javascript"></script>
    <link href="../js/plugin/Jcrop/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        function Alert(data) {
            var outHtml = $("#alertmsg").html() + "<br>" + data;
            $("#alertmsg").html(outHtml);
        }

        function showCoords(c) {
            $("#tbX").val(c.x);
            $("#tbY").val(c.y);
            $("#tbX2").val(c.x2);
            $("#tbY2").val(c.y2);
            $("#tbW").val(c.w);
            $("#tbH").val(c.h);
        };

        $(function () {

            $("#FileUpload1").change(function () {

                Alert($("#FileUpload1").val());

                $("#Image1").attr("src", "");
                $("#Image1").attr("src", $("#FileUpload1").val());

                $('#Image1').Jcrop({
                    onChange: showCoords,
                    onSelect: showCoords
                });

            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="alertmsg">
    </div>
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" ClientIDMode="Static" />
    </div>
    <div>
        <asp:Image ID="Image1" runat="server" ClientIDMode="Static" ImageUrl="file:///C:/Documents%20and%20Settings/Zheng.Lee/My%20Documents/My%20Pictures/2.gif" />
        <asp:TextBox ID="tbX" runat="server"></asp:TextBox>
        <asp:TextBox ID="tbY" runat="server"></asp:TextBox>
        <asp:TextBox ID="tbX2" runat="server"></asp:TextBox>
        <asp:TextBox ID="tbY2" runat="server"></asp:TextBox>
        <asp:TextBox ID="tbW" runat="server"></asp:TextBox>
        <asp:TextBox ID="tbH" runat="server"></asp:TextBox>
    </div>
    <div>
        <asp:Button ID="btnSubmit" runat="server" Text="提交" onclick="btnSubmit_Click" />
    </div>
    </form>
</body>
</html>
